<template>
  <el-card>
    <el-form :model="form" :rules="dataRules" ref="dataFormRef" label-width="90px">
      <el-form-item label="接入方式" prop="method">
        <el-input v-model="form.method" placeholder="请输入CMPP账号" readonly/>
<!--        <el-select
            v-model="form.method"
            placeholder="请选择接入方式"
            :disabled >
          <el-option label="CMPP" value="cmpp"></el-option>
          <el-option label="HTTP" value="http"></el-option>
        </el-select>-->
      </el-form-item>

      <!-- 动态显示参数区域 -->
      <template v-if="form.method === 'cmpp'">
        <el-col :span="24" class="mb20">
          <el-form-item label="账号" prop="methodParams.cmpp.account">
            <el-input v-model="form.methodParams.cmpp.account" placeholder="请输入CMPP账号" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="密码" prop="methodParams.cmpp.password">
            <el-input v-model="form.methodParams.cmpp.password" placeholder="请输入CMPP密码" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="流速" prop="methodParams.cmpp.acceptRate">
            <el-input v-model="form.methodParams.cmpp.acceptRate" placeholder="请输入流速限制(条/秒)"/>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="接入服务器" prop="methodParams.cmpp.serverInfoId">
            <el-select v-model="form.methodParams.cmpp.serverInfoId" placeholder="请选择接入服务器" :disabled="(!!form.id) && form.status !== 0">
              <el-option :label="item.accessIp+':'+item.serverPort" :value="item.id"
                         v-for="(item, index) in allCstmCmppServerInfos"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="ip白名单" prop="methodParams.cmpp.ips">
            <el-input v-model="form.methodParams.cmpp.ips" placeholder="请输入ip白名单"/>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="接入码" prop="methodParams.cmpp.spCode">
            <el-input v-model="form.methodParams.cmpp.spCode" placeholder="请输入接入码" :readonly="(!!form.id) && form.status !== 0"/>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="连接数" prop="methodParams.cmpp.connections">
            <el-input v-model="form.methodParams.cmpp.connections" placeholder="请输入连接数" :readonly="(!!form.id) && form.status !== 0" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="是否接入上游码号" prop="methodParams.cmpp.needProviderDest">
            <el-select v-model="form.methodParams.cmpp.needProviderDest" placeholder="请输入是否接入上游码号">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </template>

      <template v-if="form.method === 'http'">
        <el-col :span="24" class="mb20">
          <el-form-item label="账号" prop="methodParams.http.account">
            <el-input v-model="form.methodParams.http.account" placeholder="请输入HTTP账号"/>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="密码" prop="methodParams.http.password">
            <el-input v-model="form.methodParams.http.password" placeholder="请输入HTTP密码"/>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="流速" prop="methodParams.http.acceptRate">
            <el-input v-model="form.methodParams.http.acceptRate" placeholder="请输入流速限制(条/秒)"/>
          </el-form-item>
        </el-col>
      </template>

    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="onSubmit" :disabled="loading">提交</el-button>
        </span>
    </template>
  </el-card>
</template>

<script setup lang="ts" name="AccessParams">
import { ref, reactive } from 'vue';
import { useMessage } from '/@/hooks/message';
import {addObj, getConfig, putObj, updateConfig} from "/@/api/bms/customer/customer";
import {allCmppServerInfos} from "/@/api/bms/customer/cmppServerInfo";

const emit = defineEmits(['update:params']);
const loading = ref(false)
const dataFormRef = ref();
const form = reactive({
  method: '',
  methodParams: {
    cmpp: {
      account: '',
      password: '',
      acceptRate: '',
      serverInfoId: -1,
      ips: '',
      spCode: '',
      connections: '',
      needProviderDest: ''
    },
    http: {
      account: '',
      password: '',
      acceptRate: ''
    }
  }
});

const dataRules = ref({
  method: [{required: true, message: '接入方式不能为空', trigger: 'blur'}]
});

// 初始化表单数据
const getCstmCustomerConfigData = (id: number) => {
  // 获取数据
  loading.value = true
  getConfig(id).then((res: any) => {
    console.log("getConfig", res)
    if(res.code===0){
      let {method, methodParams}=res.data
      form.method=method
      if(method==='cmpp'){
        Object.assign(form.methodParams.cmpp, methodParams)
      }
    }
    console.log("methodParams",JSON.stringify(form.methodParams))
    // const { methodParams, ...restData } = res.data
    // Object.assign(form, restData)
    // // 单独处理methodParams
    // if (form.method === 'cmpp' && methodParams) {
    //   let mp = JSON.parse(methodParams)
    //   // console.log("methodParams", mp, form.methodParams.cmpp)
    //   Object.assign(form.methodParams.cmpp, mp)
    // }


  }).finally(() => {
    loading.value = false
  })
};


const customerId = ref(-1)

const initData = async (id?: number) => {
  console.log("initData----customerId", id);
  if (id != null) {
    customerId.value = id;
    getCstmCustomerConfigData(customerId.value)
  }
}
// 暴露方法给父组件
defineExpose({
  initData
})

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {
  });
  if (!valid) return false;

  //深拷贝form到一个新的对象中
  // const formCopy = JSON.parse(JSON.stringify(form));
  // //methodParams只保留选中协议的数据，并且转化成json字符串
  // if (formCopy.method === 'cmpp') {
  //   formCopy.methodParams = JSON.stringify(formCopy.methodParams.cmpp);
  // } else if (formCopy.method === 'http') {
  //   formCopy.methodParams = JSON.stringify(formCopy.methodParams.http);
  // }
  // console.log("onSumbit------", form)
  try {
    let params ={
      customerId: customerId.value,
      method: form.method,
      methodParams: form.methodParams[form.method]
    }
    loading.value = true;
    await updateConfig(params)
    //刷新数据
    await initData(customerId.value)
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};
//加载所有的下游cmpp-server
const allCstmCmppServerInfos = ref([])
const getCstmCmppServerInfos = () => {
  allCmppServerInfos().then((res: any) => {
    console.log("allCmppServerInfos", res)
    allCstmCmppServerInfos.value = res.data
  })
}

getCstmCmppServerInfos();

</script>
